<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GoldenLayout- a multi-window javascript layout manager for webapps</title>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML5, JavaScript, Layout Manager, webapp" />
	<meta name="description" content="GoldenLayout- a multi-window javascript layout manager for webapps" />
	<meta name="author" content="Wolfram Hempel" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="../assets/css/screen.css" />
	
	<link rel="stylesheet" type="text/css" href="../assets/css/api.css" />
	<link rel="stylesheet" type="text/css" href="../assets/css/syntaxhighlighter.css" />
	
	<script type="text/javascript">
	document.createElement( 'header' );
	document.createElement( 'nav' );
	</script>
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
</head>
<body class="category_tutorials">
	<div id="modal" class="loading">
		<div class="background"></div>
		<div class="content-wrapper">
			<div class="head">
				<div class="close"></div>
				<span class="title"></span>
			</div>
			<div class="content"></div>
		</div>
	</div>
	
	<div id="outerWrapper">
		

		
		<div id="nav" class="standalone">
			<div class="start-bg"></div>
			<ul>
				<li ><a href="..">Start</a></li>
				<li ><a href="../download">Download</a></li>
				<li ><a href="../examples">Demos</a></li>
				<li class="active"><a href="../tutorials">Tutorials</a></li>
				<li ><a href="../docs">Docs</a></li>
				<li ><a href="../faq">Faq</a></li>
			</ul>
			<iframe src="https://ghbtns.com/github-btn.html?user=deepstreamIO&repo=golden-layout&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

		</div>
		
		<div id="wrapper" class="main">
			<ul id="subnav">
	<li class="head first">GoldenLayout</li>
	<li >
		<a href="getting-started.html">Getting Started</a>
	</li>
	<li >
		<a href="getting-started-react.html">Getting Started ReactJS</a>
	</li>
	<li >
		<a href="saving-state.html">Saving State</a>
	</li>
	<li >
		<a href="dynamically-adding-components.html">Adding Items</a>
	</li>
	<li >
		<a href="adding-controls-to-header.html">Header Controls</a>
	</li>
	<li >
		<a href="working-with-popouts.html">Popouts</a>
	</li>
	<li class="active">
		<a href="extending-tabs.html">Extending Tabs</a>
	</li>

	<li class="head">Usage with...</li>
	<li >
		<a href="requirejs.html">RequireJS</a>
	</li>
	<li >
		<a href="angular-simple.html">Angular (simple)</a>
	</li>
	<li >
		<a href="angular-complex.html">Angular (complex)</a>
	</li>
	<li >
		<a href="highcharts.html">HighCharts</a>
	</li>
	<li >
		<a href="slickgrid.html">SlickGrid</a>
	</li>
</ul>
			<div id="content">
				<h1>Extending Tabs</h1><p>GoldenLayout makes it easy to add new functionality to pretty much everything - and tabs are no exception. This tutorial shows how to add a simple counter to a tab, for instance to show new messages.</p><p>Here’s what we’re after:</p><p><p data-height="268" data-theme-id="7376" data-slug-hash="9cb7e16c6e3a5ad427297cc4d390b971" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/wolframhempel/pen/9cb7e16c6e3a5ad427297cc4d390b971/'>Extending Tabs</a> by Wolfram Hempel (<a href='http://codepen.io/wolframhempel'>@wolframhempel</a>) on <a href='http://codepen.io'>CodePen</a>.</p></p><script async src="//codepen.io/assets/embed/ei.js"></script>

<h3>Accessing the Tab</h3><p>There are two ways to access an instance of a <a href="../docs/Tab.html">Tab object</a>. Either by traversing the item-tree, e.g.</p><pre><code>tab <span class="token operator" >=</span> myLayout<span class="token punctuation" >.</span>root<span class="token punctuation" >.</span>contentItems<span class="token punctuation" >[</span> <span class="token number" >0</span> <span class="token punctuation" >]</span><span class="token punctuation" >.</span>header<span class="token punctuation" >.</span>tabs<span class="token punctuation" >[</span> <span class="token number" >1</span> <span class="token punctuation" >]</span><span class="token punctuation" >;</span>
</code></pre><p>or, more commonly, via a container. The tricky bit though is that GoldenLayout changes the tab that’s associated with a component whilst it is dragged around the layout. So in order to manipulate the tab, we have to listen to the container’s <code>tab</code> event.</p><pre><code>container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'tab'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> tab <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
    tab<span class="token punctuation" >.</span>element<span class="token punctuation" >.</span><span class="token function" >append<span class="token punctuation" >(</span></span> counter <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>To put it into perspective, here&#39;s what the essential bits of our example-component look like:</p><pre><code>myLayout<span class="token punctuation" >.</span><span class="token function" >registerComponent<span class="token punctuation" >(</span></span> <span class="token string" >'example'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> container <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
    <span class="token keyword" >var</span> counter <span class="token operator" >=</span> $<span class="token punctuation" >(</span> <span class="token string" >'&lt;div class="messageCounter">0&lt;/div>'</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>

    container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'tab'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> tab <span class="token punctuation" >)</span><span class="token punctuation" >{</span>
        tab<span class="token punctuation" >.</span>element<span class="token punctuation" >.</span><span class="token function" >append<span class="token punctuation" >(</span></span> counter <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>Please note that the counter&#39;s DOM element (the orange bubble with the number) is only created once and then moved to every new tab that&#39;s created. This way we don&#39;t have to rebind events.
Another note-worthy bit is the css. Our bubble should be a bit darker when its tab isn&#39;t selected. This can be done by checking for an <code>.lm_active</code> class on the tab.</p><pre><code><span class="token punctuation" >.</span>lm_active <span class="token punctuation" >.</span>messageCounter<span class="token punctuation" >{</span>
    background<span class="token punctuation" >:</span> #ee7813<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
</code></pre>
				
				<h3>Comments and Questions</h3>
				<div id="disqusContainer">
					<div id="disqus_thread"></div>
				    <script type="text/javascript">
				        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				        var disqus_shortname = 'goldenlayoutcom'; // required: replace example with your forum shortname

				        /* * * DON'T EDIT BELOW THIS LINE * * */
				        (function() {
				            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
				            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
				            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				        })();
				    </script>
				    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
				    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			    
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/docs.js"></script>
		
		<div id="footerPush"></div>
	</div>
	<div id="footer">
		<div class="footer-content">
			<div class="copyright">&copy;<span class="year"></span> deepstreamHub GmbH</div>
			<script type="text/javascript">
			$('.year').html( (new Date()).getFullYear() );
			</script>
			<ul class="footerItems">
				<li>
					<a href="https://github.com/deepstreamIO/golden-layout">Github</a>
					<a href="https://www.npmjs.com/package/golden-layout">NPM</a>
					<div>bower/npm: <code>'golden-layout'</code></div>
				</li>
				<li>
					<div>deepstreamHub GmbH</div>
					<div>Lindenstrasse 20-25</div>
					<div>10969 Berlin</div>
				</li>
				<li>
					<a href="mailto:info@deepstreamhub.com">info@deepstreamhub.com</a>
					<a href="https://deepstreamhub.com/">deepstreamHub.com</a><br />
					<a href="https://twitter.com/wolframhempel">by @wolframhempel</a>

				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="../assets/js/Modal.js"></script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-63583386-5', 'auto');
	  ga('send', 'pageview');

	</script>
	
</body>
</html>